import React, { useState } from 'react';
import { Form, Input, Button, Toast, Dialog } from 'antd-mobile';
import { useNavigate } from "react-router-dom";
import { registerInterface } from "../../api/login";

const Register = () => {
    let [formData, setFormData] = useState({});
    const navigate = useNavigate();

    const registerHandler = async () => {
        console.log('注册', formData);
        // 表单项校验
        if (!formData.displayname || !formData.username || !formData.password || !formData.email || !formData.phone) {
            Toast.show({
                content: '请填写完整的信息',
                afterClose: () => {
                    console.log('after');
                },
            });
            return;
        }
        // 调用注册接口
        const res = await registerInterface(formData);
        console.log("注册结果", res);
        if (res) {
            navigate("/login");
        }
    };

    const tipHandler = () => {
        Dialog.confirm({
            content: '确认注册吗？',
            cancelText: '取消',
            confirmText: '确定',
            onConfirm: registerHandler,
        });
    };

    return (
        <div style={{ display: 'flex', height: '100vh' }} className='loginPage'>
            <div style={{ margin: 'auto' }}>
                <div style={{ textAlign: 'center', marginBottom: '20px', fontWeight: 'bold', fontSize: '2rem', color: 'rgb(255, 255, 255)' }}>注册用户</div>
                <Form
                    layout='vertical'
                    footer={
                        <Button block type='submit' color='primary' size='large' onClick={tipHandler}>
                            提交
                        </Button>
                    }
                >
                    <Form.Item
                        name='displayname'
                        label='姓名'
                        rules={[{ required: true, message: '请输入姓名' }]}
                    >
                        <Input onChange={(e) => { setFormData({ ...formData, displayname: e }) }} placeholder='请输入姓名' value={formData.displayname} />
                    </Form.Item>
                    <Form.Item
                        name='username'
                        label='登录账户'
                        rules={[
                            { required: true, message: '请输入登录账户' },
                            { pattern: /^[a-zA-Z0-9_]{4,16}$/, message: '登录账户必须为4-16位字母、数字或下划线' }
                        ]}
                    >
                        <Input onChange={(e) => { setFormData({ ...formData, username: e }) }} placeholder='请输入登录账户' value={formData.username} />
                    </Form.Item>
                    <Form.Item
                        name='password'
                        label='密码'
                        rules={[
                            { required: true, message: '请输入密码' },
                            { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/, message: '密码必须包含字母和数字，且至少6位' }
                        ]}
                    >
                        <Input type='password' onChange={(e) => { setFormData({ ...formData, password: e }) }} placeholder='请输入密码' value={formData.password} />
                    </Form.Item>
                    <Form.Item
                        name='email'
                        label='邮箱'
                        rules={[
                            { required: true, message: '请输入邮箱' },
                            { type: 'email', message: '请输入有效的邮箱地址' }
                        ]}
                    >
                        <Input onChange={(e) => { setFormData({ ...formData, email: e }) }} placeholder='请输入邮箱' value={formData.email} />
                    </Form.Item>
                    <Form.Item
                        name='phone'
                        label='电话'
                        rules={[
                            { required: true, message: '请输入电话' },
                            { pattern: /^1[3456789]\d{9}$/, message: '请输入有效的手机号码' }
                        ]}
                    >
                        <Input onChange={(e) => { setFormData({ ...formData, phone: e }) }} placeholder='请输入电话' value={formData.phone} />
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default Register;
